<template>
	<view class="container">
		<van-steps :steps="steps" :active="active" active-color="#07C160" inactive-color="#C0C0C0" />
		<view class="notice">
			对方已收到您的报名，主动<text>联系企业</text>更容易获得面试机会
		</view>
		<view class="job-box">
			<view class="top">
				<view class="title"><van-icon name="todo-list-o" size="20"  color="#07C160"/><text>职位详情</text></view>
				<view class="complain" @click="goTo"><van-icon name="info-o" size="20" /><text>投诉反馈</text></view>
			</view>
			<view class="content" @click="goto2">
				<view class="left">
					<view>五月窗高清洁工</view>
					<view>
						<text class="price">4k元/月</text>
						<view class="tag"><view class="tag-item">做六休一</view><view class="tag-item">做六休一</view><view class="tag-item">做六休一</view><view class="tag-item">做六休一</view></view>
					</view>
					<view>官方直聘</view>
				</view>
				<van-icon name="arrow" size="20" color="#D6D6D8" />
			</view>
		</view>
		<view class="sign-date">
			<text>报名时间</text><text>20220-09-10 17:23:32</text>
		</view>
		<view class="call-bar">
			<van-button type="default" block @click="callNumber"><van-icon name="phone" size="16" /><text>联系企业</text></van-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			steps: [
				{
					text: '已报名',
					desc: ''
				},
				{
					text: '企业邀请',
					desc: ''
				},
				{
					text: '同意面试',
					desc: ''
				},
				{
					text: '到店面试',
					desc: ''
				},
				{
					text: '已录用',
					desc: ''
				}
			],
			active:2
		}
	},
	methods:{
		callNumber(){
			uni.makePhoneCall({
				phoneNumber: '114' //仅为示例
			})
		},
		goTo(){
			uni.navigateTo({
				url:'./complain'
			})
		},
		goto2(){
			uni.navigateTo({
				url:'/pages/index/job/detail'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .van-button--default {
	background-color: #fff;
	color: #07C160;
}
</style>
<style lang="scss" scoped>
	.container{
		.notice{
			background-color: #FFFAED;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			margin-bottom: 20rpx;
			& > text{
				color: #07C160;
			}
		}
		.job-box{
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #F8F8FA;
				.title{
					& > text{
						margin-left: 10rpx;
					}
				}
				.complain{
					display: flex;
					align-items: center;
					& > text{
						margin-left: 10rpx;
					}
				}
			}
			.content{
				display: flex;
				cursor: pointer;
				.left{
					flex: 1;					
					& > view{
						&:nth-of-type(1){
							font-size: 36rpx;
							margin-bottom: 20rpx;
						}
						&:nth-of-type(2){
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;
							.price{
								color: #07C160;
								font-size: 36rpx;
							}
							.tag{
								flex: 1;
								display: flex;
								margin-left: 10rpx;
								.tag-item{
									font-size: 26rpx;
									margin-left: 10rpx;
									padding: 4rpx 8rpx;
									color: #749ced;
									background-color: #edeffc;
									&:first-of-type {
										margin-left: 0;
									}
								}
							}
						}
						&:nth-of-type(3){
							color: #999999;
						}
					}
				}
			}
		}
		.sign-date{
			padding: 20rpx;
			background-color: #fff;
			& > text:nth-child(2){
				margin-left: 20rpx;
			}
		}
		.call-bar{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
		}
	}
</style>
